<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>

        <script src="/lib/vue.js"></script>
        
    </head>

    <body>
        <style>
            .hc-lang-editor {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
}

.hc-lang-editor[readonly] {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    background-color: ghostwhite;
}

.hc-lang-editor:hover {
    border: 1px solid lightgray;
    border-radius: 4px;
}
        </style>
        <div id='app'>
            <hc-lang-editor ref='editor' v-model="json">
            </hc-lang-editor>

        </div>

<script src="/lib/ace-noconflict/ace.js"></script>
        <!--       <script src='hc-lang-editor.js'></script>
        <script> -->
        <script type='module'>
            import {} from './hc-lang-editor-module.js'
            
            var vm = new Vue({
                el: '#app',
                data: {
                    json: JSON.stringify({
                        a: 1,
                        b: 2,
                        c: {
                            c1: 3,
                            c2: 4,
                            a: 1
                        }
                    }, null, '\t'),
                },
                methods: {

                }
            });
        </script>

    </body>

</html>
